<script setup>
import { ref,onMounted } from 'vue'
import { ElMessage,ElMessageBox } from 'element-plus'
import { queryDept,addDept,editDept,updateDept,deleteByIdDept } from '@/api/dept'

const deptData = ref([])

//添加部门
const add = () =>{ 
  if (!deptFormRef) return
  deptFormRef.value.validate( async (valid) => {//valid表示是否通过验证，如果通过返回true，false则不通过验证
    if (valid) {
      let result = null;
      if(dept.value.id){//如果有id，则修改
        result = await updateDept(dept.value)
      }else{ //如果没有id，则添加
        result = await addDept(dept.value)
      }
      if(result.code){
        ElMessage.success('操作成功')
        dialogFormShow.value = false
        search()
      }else{
        ElMessage.error(result.msg);
      }
    } else {
      ElMessage.error('表单验证失败');
    }
  })
}

//根据id查询部门
const edit = async(id) =>{
  dialogFormShow.value = true
  table.value = '修改部门'
  const result = await editDept(id)
  if(result.code){
    dept.value = result.data 
  }
  // 重置表单
  if (deptFormRef.value){
    deptFormRef.value.resetFields()
  }
}

//删除部门
const deleteDept = (id) =>{
   ElMessageBox.confirm('确定要删除这个部门？','提示',
    {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning',}
  ).then(async() => {//1、确认后删除
    const result = await deleteByIdDept(id)
      if(result.code){
        ElMessage.success('删除成功')
        search()
      }else{
        ElMessage.error(result.msg)
      }
    }).catch(() => {//2、取消删除
      ElMessage.info('您已取消删除')
    })
}

const search = async() =>{
  // 查询部门,函数调用要加小括号，调用queryDept()来取代了axios来发送请求
  const res = await queryDept()
    if(res.code){
      deptData.value = res.data
    }
}
//设置是一个变量，用于控制对话框的显示
const dialogFormShow = ref(false) 
const dept = ref({name:''})
const table = ref(null)
const save = () =>{
  dialogFormShow.value = true
  table.value = '新增部门'
  dept.value = {name:''}
  // 重置表单
  if (deptFormRef.value){
    deptFormRef.value.resetFields()
  }
}

onMounted(()=>{ 
  search()
})
// 表单校验
const rules = ref({
  name: [
    { required: true, message: '部门名称不能为空', trigger: 'blur' },
    { min: 3, max: 10, message: '部门名称的长度3到10个字符', trigger: 'blur' },
  ]})
// 表单数据
const deptFormRef = ref();
</script>

<template>
  <h1>部门管理</h1>
  <p><el-button type="primary" @click="save"> + 新增部门</el-button></p>

  <div id="center">
    <el-table :data="deptData" border style="width: 100%">
      <el-table-column type="index" label="序号" width="100" align="center" />
      <el-table-column prop="name" label="部门名称" width="180" align="center" />
      <el-table-column prop="updateTime" label="最后操作时间" align="center" ></el-table-column>
      <el-table-column label="操作" align="center" >
        <template #default="scope">
          <el-button size="small" type="primary"  @click="edit(scope.row.id)"><el-icon><EditPen /></el-icon>修改</el-button>
          <el-button size="small" type="danger" @click="deleteDept(scope.row.id)"><el-icon><Delete /></el-icon>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <div>
    <el-dialog v-model="dialogFormShow" :title="table" width="450">
      <el-form :model="dept" :rules="rules" ref="deptFormRef">
        <el-form-item label="部门名称" label-width="80px" prop="name">
          <el-input v-model="dept.name" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormShow = false">取消</el-button>
          <el-button type="primary" @click="add">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
#center{
  margin: 20px auto;
}
</style>